<template>
  <el-form-item label="业务主题：" prop="theme" required>
    <el-select
      v-model="ruleForm.theme"
      :placeholder="language.matter_theme"
      v-el-select-loadmore="loadMoreTheme"
      class="w-600"
    >
      <el-option
        v-for="item in themeList"
        :key="item.domainId"
        :label="item.domainName"
        :value="item.domainId"
      >
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: "",
  directives: {
    "el-select-loadmore": {
      bind(el, binding) {
        // 获取element-ui定义好的scroll盒子
        const SELECTWRAP_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECTWRAP_DOM.addEventListener("scroll", function () {
          /**
           * scrollHeight 获取元素内容高度(只读)
           * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
           * clientHeight 读取元素的可见高度(只读)
           * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
           * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
           */
          const condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },
  data() {
    return {
      language: language,
      projectConfig: projectConfig,
      loading: false,
      pageDataTheme: {
        pageNum: 1,
        pageSize: 20,
      }, //选择器滚动加载
      themeList: [], //列表
    };
  },
  methods: {
    /**
     * 列表懒加载
     */
    loadMoreTheme() {
      this.pageDataTheme.pageNum++;
      this.getThemeList();
    },
    /**
     * 获取列表
     */
    getThemeList() {
      this.loading = true;
      axios
        .get(`/matter/themeList`, { params: this.pageDataTheme })
        .then((res) => {
          this.loading = false;
          if (res.data && res.data.response) {
            //滚动到底部就调一次接口，将请求过的数据和本次调的数据合并得到全部数据
            this.themeList = this.themeList.concat(res.data.response.content);
          }
        })
        .catch((e) => {
          this.loading = false;
          if (e.data && e.data.errorCode) {
            this.failTip(dictionary[e.data.errorCode]);
          } else {
            this.failTip(language.error_500);
          }
        });
    },
  },
  mounted() {
    this.getThemeList();
  },
};
</script>

<style>
</style>
